<script setup lang="ts">
import { getCategoryList, getCategoryBrandList, getCategoryBrandProList } from '@/api/kind'
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()

// 标记分类是哪一个
const active: Ref<number> = ref(0)
// 标记是什么品牌
const active2: Ref<number> = ref(0)

// 接收分类列表数据用的
const categoryList: Ref<string[]> = ref([])
// 接收某分类下品牌数据用的
const brandList: Ref<{ brand: string }[]> = ref([])
// proList 商品数据
const proList: Ref<{ img1: string, proname: string, proid: string }[]> = ref([])

onMounted(() => {

  // 获取分类列表
  getCategoryList().then(res => {
    // console.log(res.data.data);
    categoryList.value = res.data.data

    // 获取品牌数据
    getCategoryBrandList({ category: res.data.data[0] }).then(res => {
      // console.log(res.data.data);
      brandList.value = res.data.data

      // 获取品牌下的所有商品数据
      getCategoryBrandProList({ category: categoryList.value[0], brand: brandList.value[0].brand }).then(res => {
        console.log(res);
        proList.value = res.data.data
      })

    })

  })

})

// 侧边栏切换事件
function onChange(index: number) {
  // console.log(categoryList.value[index]);
  // 获取品牌数据
  getCategoryBrandList({ category: categoryList.value[index] }).then(res => {
    // console.log(res.data.data);
    brandList.value = res.data.data

    // 获取品牌下的所有商品数据
    getCategoryBrandProList({ category: categoryList.value[index], brand: brandList.value[0].brand }).then(res => {
      console.log(res);
      proList.value = res.data.data
    })

  })
}
// 品牌的点击事件
function onClickTab(data: { title: string }) {
  // console.log(data.title);
  // 获取品牌下的所有商品数据
  getCategoryBrandProList({ category: categoryList.value[active.value], brand: data.title }).then(res => {
    // console.log(res);
    proList.value = res.data.data
  })
}

function gridClick(proid: string) {
  router.push({
    path: '/detail',
    query: {
      proid: proid
    }
  })
}
</script>
<template>
  <div class="box">
    <header class="header"> 分类 </header>
    <div class="content">
      <div class="left">
        <!-- 左边的分类数据显示 -->
        <van-sidebar @change="onChange" v-model="active">
          <van-sidebar-item v-for="item in categoryList" :key="item" :title="item" />
        </van-sidebar>
      </div>
      <div class="right">
        <van-tabs @click-tab="onClickTab" v-model:active="active2" line-width="0" title-active-color="#f66">
          <van-tab v-for="item in brandList" :key="item.brand" :title="item.brand">{{ item.brand }}</van-tab>
        </van-tabs>

        <van-grid :column-num="3">
          <van-grid-item v-for="item in proList" :key="item.proid" @click="gridClick(item.proid)" :icon="item.img1"
            :text="item.proname" />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.content {
  display: flex;
}

.left {
  width: 25%;
  height: 100%;
  overflow: auto;
}

.right {
  width: 75%;
  height: 100%;
  overflow: auto;
}
</style>
